<template>
    <div>
        <h1>vue3语法</h1>
        <h2>{{ msg }}</h2>
        <h2>{{ num }}</h2>

        <input type="text" v-model="num" />
        <button @click="add">加法</button>
        <h2>{{ obj.name }}</h2>
        <input type="text" v-model="obj.name" />
        <button @click="showObj">展示对象</button>
        <h2>{{ arr }}</h2>
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <div>{{ item }}</div>
            </li>
        </ul>
        <ul>
            <li v-for="(value, key, index) of obj" :key="index">
                <div>{{ value }}---{{ key }}---{{ index }}</div>
            </li>
        </ul>
        <hr>
        <h1>data当中的值</h1>
        <h2>{{info}}</h2>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
    setup() {
        // let msg ="阳了也不怕";
        // let num = 0;
        // function add(){
        //     console.log(num);
        // }
        let msg = ref("阳了也不怕");
        let num = ref(0);
        function add() {
            console.log(num);
            console.log(num.value);

            num.value += 1;
        }

        //引用数据类型
        let obj = ref({
            name: 'tom',
            age: 18
        });

        // let obj = reactive({
        //     name:"tom",
        //     age:10,
        // });



        let arr = reactive([1, 2, 3, 4, 5, 6]);

        function showObj() {
            console.log(obj);
            // console.log(arr);
            console.log(num);
        }
        return {
            msg,
            num,
            add,
            obj,
            showObj,
            arr,
        };
    },
    data(){
        return {
            info:'看看steup和data当中的值是否一样'
            // msg:"温度变得很低",
        }
    },
});
</script>

<style scoped>

</style>